<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
	<title>在线客服后台</title>
	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min-1.5.1.js"></script>
	<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="js/init.js"></script>
</head>
<body class="easyui-layout">
	<div class="pb_header" region="north">
		<div class="top">
			<div class="logo fl">
				<img src="images/header_logo1.png" class="logo1 fl"><img src="images/header_logo2.png" class="logo2 fl">
			</div>
			<ul class="nav fr">
				<li>
					<a href="">
						<p class="img"><img src="images/icon_home.png"></p>
						<p class="font">首页</p>
					</a>
				</li>
				<li>
					<a href="">
						<p class="img"><img src="images/icon_out.png"></p>
						<p class="font">退出系统</p>
					</a>
				</li>
			</ul>
		</div>
		<div class="bottom">
			<ul>
				<li>
					<font>连接状态：</font>
					<span>已连接</span>
				</li>
				<li>
					<font>座席姓名：</font>
					<span>12</span>
				</li>
				<li>
					<font>座席工号：</font>
					<span>12</span>
				</li>
				<li>
					<font>座席组别：</font>
					<span>12</span>
				</li>
				<li>
					<font>最大连接数：</font>
					<span>12</span>
				</li>
				<li class="last">
					<font>座席状态：</font>
					<select class="easyui-combobox" style="width: 60px;height: 22px;" data-options="panelHeight:'auto'">
						<option>示闲</option>
						<option>2</option>
					</select>
				</li>
			</ul>
		</div>
	</div>
	<div region="west" class="pb_menu" collapsible="false" split="true" style="width:300px;">
		<div class="title">
			功能列表
		</div>
		<ul class="tree">
			<li>
				<a href="javascript:;" data-url="telephonyReturn.html" class="tree_node">在线咨询</a>
			</li>
			<li>
				<a href="javascript:;" data-url="telephonyReturn.html" class="tree_node">电话回复</a>
			</li>
			<li>
				<a href="javascript:;" class="tree_node">评价管理<font class="icon"></font></a>
				<ul class="tree_1">
					<li>
						<a href="javascript:;" data-url="telephonyReturn.html" class="tree_1_node"><img src="images/menu_li_icon.png">客户评分管理</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="javascript:;" class="tree_node">评价管理<font class="icon"></font></a>
				<ul class="tree_1">
					<li>
						<a href="javascript:;" data-url="telephonyReturn.html" class="tree_1_node"><img src="images/menu_li_icon.png">客户评分管理</a>
					</li>
					<li>
						<a href="javascript:;" data-url="telephonyReturn.html" class="tree_1_node"><img src="images/menu_li_icon.png">客户评分管理</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div region="center" class="pb_main">
        <div id="tt" class="easyui-tabs" fit="true" border="false">
			<div title="欢迎使用壹融站在线客服系统"> 
				<iframe id="iframe" frameborder="0" name="iframe" scrolling="auto" style="width:100%;height:100%" src='index.html'></iframe>
			</div>
		</div>
	</div>
	<div region="east" class="pb_list" collapsible="false" split="true" style="width:260px;">
		<ul class="tree">
			<li>
				<a href="javascript:;" class="tree_node">客户列表(0)<font class="icon"></font></a>
				<ul class="tree_1">
					<li>
						<a href="javascript:;" class="tree_1_node"><img src="images/icon_customer.png">客户1</a>
					</li>
					<li>
						<a href="javascript:;" class="tree_1_node"><img src="images/icon_customer.png">客户2</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="javascript:;" class="tree_node">座席列表(1/10)<font class="icon"></font></a>
				<ul class="tree_1">
					<li>
						<a href="javascript:;" class="tree_1_node"><img src="images/icon_agent1.png">座席1-示闲</a>
					</li>
					<li>
						<a href="javascript:;" class="tree_1_node"><img src="images/icon_agent2.png">座席2</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div region='south' split='true' class="pb_footer" style="height: 38px;">
		<ul>
			<li>
				当前等待客户数：<span class="mr15">入口维护0人</span>
				<span class="mr15">预约办理0人</span>
				<span class="mr15">产品咨询0人</span>
				<span class="mr50">全业务0人</span>
				当前未处理数：<span>黑名单拦截1人</span>
			</li>
		</ul>
	</div>
	<div id="mm" class="easyui-menu" style="width:150px;">
	    <div id="mm-tabclosrefresh" data-options="name:6">刷新</div>
	    <div id="mm-tabclose" data-options="name:1">关闭</div>
	    <div id="mm-tabcloseall" data-options="name:2">全部关闭</div>
	    <div id="mm-tabcloseother" data-options="name:3">除此之外全部关闭</div>
	    <div class="menu-sep"></div>
	    <div id="mm-tabcloseright" data-options="name:4">当前页右侧全部关闭</div>
	    <div id="mm-tabcloseleft" data-options="name:5">当前页左侧全部关闭</div>
	</div>
	<script type="text/javascript">
		// 菜单展开收缩
		$('.pb_menu .tree_node,.pb_list .tree_node').each(function(){
			$(this).next().find('li').last().css('padding-bottom','8px');
			if($(this).next().length>0){
				if($(this).next().css('display')=='none'){
					$(this).removeClass('active');
				}else{
					$(this).addClass('active');
				}
				$(this).click(function(){
					if($(this).next().css('display')=='none'){
						$(this).next().stop(false,true).slideDown();
						$(this).addClass('active');
					}else{
						$(this).next().stop(false,true).slideUp();
						$(this).removeClass('active');
					}
				});
			}
		});
		$('.pb_list .tree_node').each(function(){
			$(this).next().find('li').last().css('padding-bottom','0px');
		});
		// 点击跳转
		$('.pb_menu .tree_node,.pb_menu .tree_1 .tree_1_node').each(function(){
			if(!$(this).next().length>0){
				$(this).click(function(){
					var title=$(this).text();
					var url=$(this).attr('data-url');
					if ($('#tt').tabs('exists', title)){
						$('#tt').tabs('select', title);
						var tab = $('#tt').tabs('getSelected');
						var content = null;
						content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
						$('#tt').tabs('update',{
							tab:tab,
							options:{  
								title:title,
								content:content,
								closable:true
							}
						});
					} else {
						var content = null;
						content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
						$('#tt').tabs('add',{
							title:title,
							content:content,
							closable:true
						});
					}
				});
			}
		});
		//监听右键事件，创建右键菜单
	    $('#tt').tabs({
	        onContextMenu: function (e, title, index) {
	            e.preventDefault();
	            if (index > 0) {
	                $('#mm').menu('show', {
	                    left: e.pageX,
	                    top: e.pageY
	                }).data("tabTitle", title);
	            }
	        }
	    });
	    //右键菜单click
	    $("#mm").menu({
	        onClick: function (item) {
	            closeTab(this, item.name);
	        }
	    });
	    //删除Tabs
		function closeTab(menu, type) {
		    var allTabs = $("#tt").tabs('tabs');
		    var allTabtitle = [];
		    $.each(allTabs, function (i, n) {
		        var opt = $(n).panel('options');
		        if (opt.closable)
		            allTabtitle.push(opt.title);
		    });
		    var curTabTitle = $(menu).data("tabTitle");
		    var curTabIndex = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle));
		    switch (type) {
		        case 1:
		            $("#tt").tabs("close", curTabIndex);
		            return false;
		            break;
		        case 2:
		            for (var i = 0; i < allTabtitle.length; i++) {
		                $('#tt').tabs('close', allTabtitle[i]);
		            }
		            break;
		        case 3:
		            for (var i = 0; i < allTabtitle.length; i++) {
		                if (curTabTitle != allTabtitle[i])
		                    $('#tt').tabs('close', allTabtitle[i]);
		            }
		            $('#tt').tabs('select', curTabTitle);
		            break;
		        case 4:
		            for (var i = curTabIndex; i < allTabtitle.length; i++) {
		                $('#tt').tabs('close', allTabtitle[i]);
		            }
		            $('#tt').tabs('select', curTabTitle);
		            break;
		        case 5:
		            for (var i = 0; i < curTabIndex-1; i++) {
		                $('#tt').tabs('close', allTabtitle[i]);
		            }
		            $('#tt').tabs('select', curTabTitle);
		            break;
		        case 6: //刷新
		            var panel = $("#tt").tabs("getTab", curTabTitle).panel("refresh");
		            break;
		    }
		}
	</script>
</body>
</html>